<template>
  <div>
    <home-head title="商品列表页" />
    <div class="wrap">
      <ul class="list-title">
        <li @click="titleActive(0)"
            :class="{ active: active === 0 }">综合</li>
        <li @click="titleActive(1)"
            :class="{ active: active === 1 }">销量</li>
        <li @click="angleActives"
            :class="['price', { active: active === 2 }]">
          <span>价格</span>
          <div :class="['angle', 'up', {active: active === 2 && angleActive === 0}]"></div>
          <div :class="['angle', 'down', {active: active === 2 && angleActive === 1}]"></div>
        </li>
        <li @click="titleActive(4)"
            :class="{ active: active === 4 }">新品</li>
      </ul>
      <van-pull-refresh v-model="isLoading"
                        @refresh="onRefresh">
        <van-list v-model="loading"
                  :offset="30"
                  :finished="finished"
                  finished-text="我也是有底线的= ="
                  @load="onLoad">
          <div class="items">
            <div class="item"
                 v-for="(item, index) in items"
                 :key="index"
                 @click="DetailItem(item.id, index)">
              <img class="item-img"
                   :src="item.pic"
                   alt="">
              <div class="item-info">
                <h4 class="name">
                  {{ item.name }}
                </h4>
                <p class="desc">
                  {{ item.characteristic?item.characteristic:'暂无描述' | itemTitle }}
                </p>
                <div class="action">
                  <p class="price">
                    {{ item.minPrice | itemPrice("￥")}}
                  </p>
                  <van-icon class-prefix="icon"
                            name="shouye-jiarugouwuche"></van-icon>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import HomeHead from 'components/HomeHead'
import { fetchItem } from 'api'
export default {
  name: 'itemlist',
  data () {
    return {
      active: 0,
      angleActive: 0,
      items: [],
      isLoading: false,
      page: 1,
      pageSize: 5,
      loading: false,
      finished: false
    }
  },
  filters: {
    itemTitle (v, len = 10) {
      if (v.length > len) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    },
    itemPrice (v, sign = '$') {
      return sign + v
    }
  },
  // created () {
  //   this.fetchItems()
  // },
  methods: {
    DetailItem (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onLoad () {
      this.fetchItems()
      this.page++
    },
    onRefresh () {
      // 刷新回到第一页
      this.page = 1
      this.items = []
      // 改变最后一页状态
      this.finished = false
      this.fetchItems()
    },
    fetchItems () {
      fetchItem({
        k: this.$route.query.keyword,
        orderBy: this.orderBy,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.isLoading = false
        this.loading = false
        if (res.data.code === 700) {
          this.finished = true
        }
        if (res.data.code === 0) {
          this.loading = false
          this.items = [
            ...this.items,
            ...res.data.data.result
          ]
        }
      })
    },
    titleActive (index) {
      this.active = index
      this.page = 1
      this.items = []
      this.finished = false
      this.onLoad()
    },
    angleActives () {
      if (this.active !== 2) {
        this.active = 2
        this.angleActive = 0
      } else {
        if (this.angleActive === 0) {
          this.angleActive = 1
        } else {
          this.angleActive = 0
        }
      }
      this.page = 1
      this.items = []
      this.finished = false
      this.onLoad()
    }
  },
  computed: {
    orderBy () {
      let order = ''
      switch (this.active) {
        case 0:
          // 综合
          order = ''
          break
        case 1:
          // 销量
          order = 'ordersUp'
          break
        case 2:
          // 价格 判断升序还是降序
          if (this.angleActive === 0) {
            order = 'priceUp'
          } else {
            order = 'priceDown'
          }
          break
        case 4:
          // 新品
          order = 'addedDown'
          break
      }
      return order
    }
  },
  components: {
    HomeHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  .items {
    .item {
      width: 94%;
      margin: 12px auto;
      height: 190px;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-img {
        width: 170px;
        height: 100%;
      }
      .item-info {
        height: 100%;
        flex: 1;
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 15px;
          font-weight: bold;
        }
        .desc {
          font-size: 14px;
        }
        .action {
          flex: 1;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          .price {
            padding-bottom: 15px;
            font-weight: bold;
          }
          .icon {
            font-size: 24px;
            color: #ff734c;
          }
        }
      }
    }
  }
  padding-top: 46px;
  .list-title {
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid rgb(236, 236, 236);
    li.active {
      color: #ff734c;
    }
    .price {
      position: relative;
      .angle {
        position: absolute;
        border: 4px solid transparent;
        right: -12px;
        &.up {
          border-bottom-color: rgba(153, 153, 153, 0.699);
          top: 2px;
          &.active {
            border-bottom-color: #ff734c;
          }
        }
        &.down {
          border-top-color: rgba(153, 153, 153, 0.699);
          top: 12px;
          &.active {
            border-top-color: #ff734c;
          }
        }
      }
    }
  }
}
</style>
